<style lang="scss" scoped>
  .app-container {
    > p {
      font-size: 18px;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .header {
      .el-form {
        min-height: 55px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 20px;

        .el-form-item {
          margin-bottom: 10px;

          ::v-deep .el-form-item__label {
            font-size: 14px;
            letter-spacing: -0.07px;
            line-height: 32px;
            color: rgba(3, 2, 2, 1);
            text-align: right;
          }

          ::v-deep .el-form-item__content {
            .el-input {

              .el-input__inner {
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 10px;
              }
            }

            .el-button {
              height: 32px;
              border-radius: 2px;
              background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
              padding: 8px 18px;
              color: #fff;
              border: none;
              margin-left: 25px;

              &:hover {
                border: none;
                background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
              }

              &:nth-child(1) {
                width: 60px;
                height: 32px;
                opacity: 1;
                border-radius: 2px;
                background: rgba(242, 243, 245, 1);
                color: rgba(0, 0, 0, 0.3);
                padding: 8px 16px 8px 16px;

                &:hover {
                  border: none;
                  background: rgb(228, 228, 228);

                }
              }
            }
          }
        }
      }
    }

    .content {
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      padding-top: 15px;
      padding-bottom: 20px;

      .el-tabs {
        margin-left: 50px;

        ::v-deep .el-tabs__item {
          color: rgba(188, 195, 212, 1);
          font-size: 14px;
        }

        ::v-deep .is-active {
          color: rgba(94, 129, 244, 1) !important;
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(94, 129, 244, 1);
        }

        ::v-deep .el-tabs__active-bar {
          background-color: rgba(94, 129, 244, 1) !important;
        }
      }

      .description-cell {
        .cell-content {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.6em;
          max-height: 3.2em;
        }
      }

      ::v-deep .el-table {
        font-size: 12px;

        .el-tooltip__popper.is-dark {
          white-space: normal;
          max-width: 200px;
          /* 或者其他合适的宽度 */
        }
      }

      ::v-deep .el-table .el-table__header-wrapper th,
      ::v-deep .el-table .el-table__fixed-header-wrapper th {
        height: 41px !important;
        border-radius: 10px 10px, 0px, 0px;
        background: rgba(83, 90, 244, 0.1);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 11.72px;
        color: rgba(83, 90, 244, 1);
      }

      .status {
        display: block;
        padding: 3px 0px;
        opacity: 0.9;
        border-radius: 5px;
        font-size: 11px;
        text-align: center;
        transition: opacity 0.3s ease-in-out;
      }

      .status:hover {
        opacity: 1;
      }

      .normal {
        color: #00B3A7;
        /* 深青色 */
        background-color: #E0F7FA;
        /* 浅青色 */
      }

      .tradingIn {
        color: #FFA500;
        /* 橙色 */
        background-color: #ffeac9;
        /* 浅橙色 */
      }

      .soldOut {
        color: #FF0000;
        /* 红色 */
        background-color: #ffdada;
        /* 浅红色 */
      }

      .abnormal {
        color: #FF00FF;
        /* 紫色 */
        background-color: #FFE4FF;
        /* 浅紫色 */
      }
    }
  }

  ::v-deep .el-dialog {
    width: 849px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    p {
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .el-input {
      .el-input__inner {
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 10px;
      }
    }

    .el-button {
      width: 60px;
      height: 32px;
      opacity: 1;
      border-radius: 2px;
      background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
      padding: 8px 16px 8px 16px;
      color: #fff;
      border: none;
      margin-left: 25px;

      &:hover {
        border: none;
        background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
      }

      &:nth-child(2) {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(242, 243, 245, 1);
        color: rgba(0, 0, 0, 0.3);
        padding: 8px 16px 8px 16px;

        &:hover {
          border: none;
          background: rgb(228, 228, 228);
        }
      }
    }

    .el-input-number {
      .el-input {
        .el-input__inner {
          border: 1px solid rgba(127, 127, 213, 0.5);
          border-radius: 0px;
        }
      }
    }

    .el-dialog__title {
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 8px;

    }
  }

  .main-title {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    background: #7696FC;
    padding: 6px 20px;
    color: #fff;
    border-radius: 2px;
  }

  ::v-deep.el-checkbox--mini {
    margin-left: 0 !important;
  }
</style>
<template>
  <div class="app-container">
    <p>平台配置</p>
    <div class="header">

      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="85px">
        <el-form-item>
          <el-button type="primary" plain size="mini" @click="handleAdd" v-hasPermi="['system:platform:add']">新增
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-table v-loading="loading" :data="dataList" row-key="id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="编号" align="center" width="90">
          <template slot-scope="scope">
                        <span v-if="scope.row.pid === 0">
                            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                        </span>
          </template>
        </el-table-column>
        <el-table-column label="平台" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.platFormName == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.platFormName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="platFormKey" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.platFormKey == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.platFormKey }}</span>
          </template>
        </el-table-column>

        <el-table-column label="游戏类型" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.type == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.type }}</span>
          </template>
        </el-table-column>

        <el-table-column label="账号" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.account == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.account }}</span>
          </template>
        </el-table-column>

        <el-table-column label="密码" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.password == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.password }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                       inactive-value="0" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="联系QQ" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.linkQq == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.linkQq }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系手机" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.linkPhone == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.linkPhone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系微信" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.linkWx == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.linkWx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="溢价比例" align="center" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.percentage == null" style="color: red;">/</span> <span v-else>{{
                            scope.row.percentage}}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" align="center" prop="address" width="200"/>
        <el-table-column label="地址1" align="center" prop="addressUrl" width="200"/>
        <el-table-column fixed="right" label="操作" width="150px" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="update(scope.row)" v-hasPermi="['system:platform:edit']">
              <span style="color: red;margin-right: 5px;">修改</span>
            </el-button>
            <el-button size="mini" type="text" @click="del(scope.row)" v-hasPermi="['system:platform:remove']">
              <span style="color: red;margin-right: 5px;">删除</span>
            </el-button>
            <el-button v-if="scope.row.pid === 0" size="mini" type="text" @click="config(scope.row)"
                       v-hasPermi="['system:platform:add']">
              <span style="color: red;margin-right: 5px;">配置游戏</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="title" :visible.sync="configopen" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="configopenForm" label-width="100px">
        <el-row>
          <el-col >
            <el-form-item label="平台">
              <el-input disabled v-model="configopenForm.platFormName" style="width:300px;" placeholder="请输入平台名"/>
            </el-form-item>

            <el-form-item label="游戏品类">
              <el-select v-model="configopenForm.dictCode" style="width:300px;" clearable placeholder="游戏品类：请选择游戏品类" @change="handleChange">
                <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                           :value="item.dictCode"/>
              </el-select>
            </el-form-item>

            <el-form-item label="游戏类型" prop="type">
              <el-input-number :min="1" v-model="configopenForm.type" style="width:300px;" placeholder="请输入游戏类型"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="configopen = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('config')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <!-- <dev v-if="form.pid==0"> -->
            <el-form-item label="平台" prop="platFormName">
             <el-input v-model="form.platFormName" style="width:300px;"  placeholder="请输入平台名"/>
            </el-form-item>
            <el-form-item label="key" prop="key">
             <el-input v-model="form.platFormKey" style="width:300px;"  placeholder="请输入key"/>
            </el-form-item>
            <el-form-item label="游戏类型" prop="type">
            <el-input-number :min="1" v-model="form.type" style="width:300px;" placeholder="请输入游戏类型"/>
          </el-form-item>
            <el-form-item label="账户" prop="account">
             <el-input v-model="form.account" style="width:300px;"  placeholder="请输入账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
             <el-input v-model="form.password" style="width:300px;"  placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item label="地址" prop="address">
             <el-input :autosize="{ minRows: 4, maxRows: 5 }" style="width:300px;"  v-model="form.address" placeholder="请输入地址"/>
            </el-form-item>

            <el-form-item label="联系QQ" prop="linkQq">
             <el-input :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.linkQq" style="width:300px;"  placeholder="请输入联系QQ"/>
            </el-form-item>

            <el-form-item label="联系手机" prop="linkPhone">
             <el-input :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.linkPhone" style="width:300px;"  placeholder="请输入联系手机"/>
            </el-form-item>
            <el-form-item label="联系微信" prop="linkWx">
             <el-input :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.linkWx" style="width:300px;"  placeholder="请输入联系微信"/>
            </el-form-item>

            <el-form-item label="状态" prop="status">
             <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                        inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="溢价比例(%)" prop="type">
            <el-input-number  v-model="form.percentage" style="width:300px;" placeholder="请输入游戏类型"/>
          </el-form-item>
            <!-- </dev> -->

          <!-- <el-form-item label="平台">
            <el-input disabled v-model="form.platFormName" style="width:300px;" placeholder="请输入平台名"/>
          </el-form-item> -->

          <!-- <el-form-item label="游戏品类">
            <el-select v-model="form.dictCodeId" style="width:300px;" clearable placeholder="游戏品类：请选择游戏品类" @change="handleChildChange('c')">
              <el-option v-for="item in gameList" :key="item.dictCode" :label="item.dictLabel"
                         :value="item.dictCode"/>
            </el-select>
          </el-form-item> -->


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {listPlatform, addPlatform, updatePlatform, delPlatform} from '@/api/business/platform'

    export default {
        name: 'Management',
        data() {
            return {
                title: "",
                open: false,
                // 显示搜索条件
                showSearch: true,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10
                },
                rules: {
                    // platformName: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //   { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'change' }
                    // ],
                    // platFormKey: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     // { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'change' }
                    // ],
                    // account: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'change' }
                    // ],
                    // password: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //  { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'change' }
                    // ],
                    // address: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //  { min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'change' }
                    // ],
                    // linkQq: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //  { pattern: /^[1-9][0-9]{4,9}$/, message: '不是有效的QQ号', trigger: 'change' }
                    // ],
                    // linkPhone: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     { pattern: /^1[34578]\d{9}$/, message: '不是有效的手机号码', trigger: 'change' }
                    // ],
                    // linkWx: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     //  { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'change' }
                    // ],
                    // type: [
                    //     { required: true, message: '请输入', trigger: 'change' },
                    //     // { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'change' }
                    // ]
                },
                form: {},
                dataList: null,
                total: 10,
                loading: false,
                value: '',
                configopen: false,
                gameList: null,
                configopenForm: {}
            }
        },
        created() {
            this.getList();
            //查询游戏列字典
            this.getDicts('game_category').then(res => {
                this.gameList = res.data
            });
        },

        methods: {
            handleStatusChange(row) {
                updatePlatform(row).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open = false
                    this.getList();
                })
            },
            isExpandAll() {

            },
            config(row) {
                this.reset()
                this.title = '配置'
                this.configopen = true
                this.configopenForm = {}
                this.configopenForm.pid = row.id
                this.configopenForm.platFormName = row.platFormName
            },

            handleChildChange(e){
                let game =  this.gameList.find(i=>i.dictCode == e);
                if(game) {
                    this.form.dictLabel = game.dictLabel;
                }
            },

            handleChange(e) {
              let game =  this.gameList.find(i=>i.dictCode == e);
              if(game) {
                  this.configopenForm.dictLabel = game.dictLabel;
              }
            },
            del(row) {
                delPlatform(row.id).then(response => {
                    this.$modal.msgSuccess("删除成功");
                    this.open = false
                    this.getList();
                })
            },
            update(row) {
                this.title = '修改平台';
                this.reset()
                this.open = true
                this.form = {...row};
                console.log(this.form)
            },

            handleAdd() {
                this.reset()
                this.open = true
                this.title = '新增平台';
            },

            submitForm(text) {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (text != 'config') {
                            if (this.form.id) {
                                updatePlatform(this.form).then(response => {
                                    this.$modal.msgSuccess("修改成功");
                                    this.open = false
                                    this.getList();
                                })
                            } else {
                                addPlatform(this.form).then(response => {
                                    this.$modal.msgSuccess("新增成功");
                                    this.open = false
                                    this.getList();
                                })
                            }
                        } else {
                            if (this.configopenForm.id) {
                                updatePlatform(this.configopenForm).then(response => {
                                    this.$modal.msgSuccess("修改成功");
                                    this.configopen = false
                                    this.getList();
                                })
                            } else {
                                console.log(this.configopenForm)
                                addPlatform(this.configopenForm).then(response => {
                                    this.$modal.msgSuccess("新增成功");
                                    this.configopen = false
                                    this.getList();
                                })
                            }
                        }
                    }
                });
            },

            reset() {
                this.resetForm('form')
            },

            getList() {
                listPlatform(this.queryParams).then(response => {
                    this.dataList = response.data
                })
            }
        }
    }
</script>

<style>
  .horizontal-checkbox-group .el-checkbox {
    display      : inline-block;
    /* 或者使用 flex */
    margin-right : 10px;
    /* 为复选框添加一些右边距 */
  }
</style>
